<!DOCTYPE html>
<html class="overflow-hidden">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="wap-font-scale" content="no">
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>礼仪之邦-我的订单</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/swiper.min.css"/>
    <link rel="stylesheet" href="css/public.css"/>
    <link rel="stylesheet" href="css/app.css"/>
</head>
<body class="overflow-hidden">
<div class="collect-bar register-bar order-bar">
    <h2 class="header-box pos-abs-tl">
        <a class="go-back-btn sprite-icon" href="#"></a>
        我的订单
    </h2>

    <div class="collect-cont">
        <div id="wrapper">
            <div id="scroller">
                <div class="order-content">
                    <div class="order-area">
                        <a href="address.html">
                            <div class="add-user">
                                <span class="add-user-name text-overflow">徐继强</span>
                                <span class="add-user-phone">13628332957</span>
                            </div>
                            <div class="add-location text-clamp-overflow">
                                <i class="shopType-sprite-icon"></i>
                                重庆市 重庆市 江北区 观音桥街道，建北一村78号6-1
                            </div>
                        </a>
                    </div>
                    <div class="collect-list shopCar-list order-page-list">
                        <ul>
                            <li>
                                <div class="collect-intro">
                                    <a href="#">
                                        <label class="collect-img">
                                            <img src="img/collect-img.jpg">
                                            <!--<i class="shopType-sprite-icon presell-icon"></i>-->
                                        </label>

                                        <div class="collect-intro-text">
                                            <p class="collect-name text-clamp-overflow">祥云和山茶油家庭装1L压榨祥云和山茶油家庭
                                                压榨祥云和山茶油家庭装1L压榨祥云和山</p>

                                            <div class="product-norms text-overflow">三源直供</div>

                                            <p class="collect-price" data-price="148.00">￥148.00元</p>

                                            <div class="number-box pos-abs-br">
                                                <div class="number-bar">
                                                    <label class="num-btn-box num-btn-cut">
                                                        <span class="num-cut sprite-icon"></span>
                                                    </label>
                                                    <span class="num-input" data-max="10">
                                                        <input value="1" type="text" readonly>
                                                    </span>
                                                    <label class="num-btn-box num-btn-add">
                                                        <span class="num-add sprite-icon"></span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </li>
                            <li>
                                <div class="collect-intro">
                                    <a href="#">
                                        <label class="collect-img">
                                            <img src="img/collect-img.jpg">
                                            <i class="shopType-sprite-icon presell-icon"></i>
                                        </label>

                                        <div class="collect-intro-text">
                                            <p class="collect-name text-clamp-overflow">祥云和山茶油家庭装1L压榨祥云和山茶油家庭
                                                压榨祥云和山茶油家庭装1L压榨祥云和山</p>

                                            <p class="collect-price" data-price="148.00">￥148.00元</p>

                                            <div class="number-box pos-abs-br">
                                                <div class="number-bar">
                                                    <label class="num-btn-box num-btn-cut">
                                                        <span class="num-cut sprite-icon"></span>
                                                    </label>
                                                    <span class="num-input" data-max="10">
                                                        <input value="1" type="text" readonly>
                                                    </span>
                                                    <label class="num-btn-box num-btn-add">
                                                        <span class="num-add sprite-icon"></span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </li>
                            <li>
                                <div class="collect-intro">
                                    <a href="#">
                                        <label class="collect-img">
                                            <img src="img/collect-img.jpg">
                                            <i class="shopType-sprite-icon presell-icon"></i>
                                        </label>

                                        <div class="collect-intro-text">
                                            <p class="collect-name text-clamp-overflow">祥云和山茶油家庭装1L压榨祥云和山茶油家庭
                                                压榨祥云和山茶油家庭装1L压榨祥云和山</p>

                                            <p class="collect-price" data-price="148.00">￥148.00元</p>

                                            <div class="number-box pos-abs-br">
                                                <div class="number-bar">
                                                    <label class="num-btn-box num-btn-cut">
                                                        <span class="num-cut sprite-icon"></span>
                                                    </label>
                                                    <span class="num-input" data-max="10">
                                                        <input value="1" type="text" readonly>
                                                    </span>
                                                    <label class="num-btn-box num-btn-add">
                                                        <span class="num-add sprite-icon"></span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </li>
                            <li>
                                <div class="collect-intro">
                                    <a href="#">
                                        <label class="collect-img">
                                            <img src="img/collect-img.jpg">
                                            <i class="shopType-sprite-icon presell-icon"></i>
                                        </label>

                                        <div class="collect-intro-text">
                                            <p class="collect-name text-clamp-overflow">祥云和山茶油家庭装1L压榨祥云和山茶油家庭
                                                压榨祥云和山茶油家庭装1L压榨祥云和山</p>

                                            <p class="collect-price" data-price="148.00">￥148.00元</p>

                                            <div class="number-box pos-abs-br">
                                                <div class="number-bar">
                                                    <label class="num-btn-box num-btn-cut">
                                                        <span class="num-cut sprite-icon"></span>
                                                    </label>
                                                    <span class="num-input" data-max="10">
                                                        <input value="1" type="text" readonly>
                                                    </span>
                                                    <label class="num-btn-box num-btn-add">
                                                        <span class="num-add sprite-icon"></span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </li>
                            <li>
                                <div class="collect-intro">
                                    <a href="#">
                                        <label class="collect-img">
                                            <img src="img/collect-img.jpg">
                                            <i class="shopType-sprite-icon presell-icon"></i>
                                        </label>

                                        <div class="collect-intro-text">
                                            <p class="collect-name text-clamp-overflow">祥云和山茶油家庭装1L压榨祥云和山茶油家庭
                                                压榨祥云和山茶油家庭装1L压榨祥云和山</p>

                                            <p class="collect-price" data-price="148.00">￥148.00元</p>

                                            <div class="number-box pos-abs-br">
                                                <div class="number-bar">
                                                    <label class="num-btn-box num-btn-cut">
                                                        <span class="num-cut sprite-icon"></span>
                                                    </label>
                                                    <span class="num-input" data-max="10">
                                                        <input value="1" type="text" readonly>
                                                    </span>
                                                    <label class="num-btn-box num-btn-add">
                                                        <span class="num-add sprite-icon"></span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </li>
                            <li>
                                <div class="collect-intro">
                                    <a href="#">
                                        <label class="collect-img">
                                            <img src="img/collect-img.jpg">
                                            <i class="shopType-sprite-icon presell-icon"></i>
                                        </label>

                                        <div class="collect-intro-text">
                                            <p class="collect-name text-clamp-overflow">祥云和山茶油家庭装1L压榨祥云和山茶油家庭
                                                压榨祥云和山茶油家庭装1L压榨祥云和山</p>

                                            <p class="collect-price" data-price="148.00">￥148.00元</p>

                                            <div class="number-box pos-abs-br">
                                                <div class="number-bar">
                                                    <label class="num-btn-box num-btn-cut">
                                                        <span class="num-cut sprite-icon"></span>
                                                    </label>
                                                    <span class="num-input" data-max="10">
                                                        <input value="1" type="text" readonly>
                                                    </span>
                                                    <label class="num-btn-box num-btn-add">
                                                        <span class="num-add sprite-icon"></span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </li>
                            <li>
                                <div class="collect-intro">
                                    <a href="#">
                                        <label class="collect-img">
                                            <img src="img/collect-img.jpg">
                                            <i class="shopType-sprite-icon presell-icon"></i>
                                        </label>

                                        <div class="collect-intro-text">
                                            <p class="collect-name text-clamp-overflow">祥云和山茶油家庭装1L压榨祥云和山茶油家庭
                                                压榨祥云和山茶油家庭装1L压榨祥云和山</p>

                                            <p class="collect-price" data-price="148.00">￥148.00元</p>

                                            <div class="number-box pos-abs-br">
                                                <div class="number-bar">
                                                    <label class="num-btn-box num-btn-cut">
                                                        <span class="num-cut sprite-icon"></span>
                                                    </label>
                                                    <span class="num-input" data-max="10">
                                                        <input value="1" type="text" readonly>
                                                    </span>
                                                    <label class="num-btn-box num-btn-add">
                                                        <span class="num-add sprite-icon"></span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </li>
                        </ul>
                        <span id="showMore" class="show-more pos">还有2件<i class="sprite-icon icon-arrow"></i></span>
                    </div>
                    <div class="order-intro">
                        <div class="register-cont no-margin">
                            <ul>
                                <li class="no-padding">
                                    <div class="register-input line-black padding-left no-padding">
                                        <label>备注信息：</label>
                                        <input class="pwd" placeholder="填写你的要求（50字以内）" value="" type="text"
                                               maxlength="50">
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="order-price">
                        <div class="pay-intro">
                            <h2><span>商品总额</span><label>¥72.80</label></h2>

                            <p><span>- 优惠券</span><label>¥0.00</label></p>

                            <p><span>+ 运费</span><label>¥10.00</label></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="collect-bottom po-abs order-bottom">
        <div class="shop-handle list-row">
            <ul class="row-2">
                <li class="shop-handle-intro"><label>合计：￥62.00</label></li>
                <li class="shop-handle-btn">
                    <a id="ensureBtn" class="t-buy-btn active show-box" href="javascript:;">确认订单</a>
                </li>
            </ul>
        </div>
    </div>
</div>

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/box.js"></script>
<script src="js/public.js"></script>
<script>
    $(function () {
        var myScroll = publicFuns.newIScroll("#wrapper");


        //显示可以输入的加减法
        $(document).on("click", ".num-input", shopNumBox);
        $(document).on("click", ".num-add", "add", calculate);
        $(document).on("click", ".num-cut", "cut", calculate);
        function calculate(e) {
            var _max = 0;
            switch (e.data) {
                case "add":
                    _max = parseInt($(this).prev().attr("data-max"));
                    publicFuns.numberCalculate($(this).prev(), _max, "add", function () {
                        console.log("你加数字了！");
                    }, "");
                    break;
                case "cut":
                    _max = parseInt($(this).prev().attr("data-max"));
                    publicFuns.numberCalculate($(this).next(), _max, "cut", "", function () {
                        console.log("你减数字了！");
                    });
                    break;
            }
        }

        function shopNumBox() {
            var _this = this;
            publicFuns.showCheckNum(_this, function () {
                var _val = parseInt($(_this).find("input").val());
                console.log("这是您输入的值：" + _val);
            })
        }

        //显示更多
        var $tag = $("#showMore");
        //还有n件
        var n = $tag.prev().children().length - 3;
        $tag.html('还有' + n + '件<i class="sprite-icon icon-arrow"></i>');

        $tag.click(function () {
            var _this = this;
            var _height = $(this).prev().height();
            $(this).find("i").toggleClass("active");
            if ($(this).find("i").hasClass("active")) {
                $(".order-page-list").animate({
                    "height": (_height + 30) + "px"
                }, 300, function () {
                    $(_this).html('<i class="sprite-icon icon-arrow active"></i>');
                    myScroll.refresh();
                });
            } else {
                $(".order-page-list").animate({
                    "height": "298px"
                }, 300, function () {
                    $(_this).html('还有' + n + '件<i class="sprite-icon icon-arrow"></i>');
                    myScroll.refresh();
                });
            }
        });

        $(window).resize(function () {
            myScroll.refresh();
        }).trigger("redize");
    })
</script>
</body>
</html>